Component({
  /**
   * 组件的属性列表
   */
  attached() {
    // 初始化同步顶部距离与 下拉刷新距离
    if (this.headHeight) {
      this.pullDistance = this.headHeight
    }
  },
  options: {
    multipleSlots: true,
    addGlobalClass: true
  },

  properties: {
    // 下拉刷新 复位 未达到阈值 提示文本
    pullingText: {
      type: String,
      value: '下拉刷新...'
    },
    //	下拉刷新 达到阈值 提示文本
    loosingText: {
      type: String,
      value: '松手即可刷新...'
    },
    // 下拉刷新 http请求中 提示文本
    loadingText: {
      type: String,
      value: '请求中...'
    },
    // 下拉刷新 http请求成功 提示文本
    successText: {
      type: String,
      value: '刷新成功'
    },
    // 下拉刷新 http请求失败 提示文本
    failText: {
      type: String,
      value: '刷新失败'
    },
    // 顶部内容高度
    headHeight: {
      type: Number,
      value: 45
    },
    // 触发下拉刷新的距离
    pullDistance: {
      type: Number,
      value: 45
    },
    // 是否禁用下拉刷新
    disabled: {
      type: Boolean,
      value: false
    },
    // 下拉刷新  http请求完成 复位间隔时间
    restoreTime: {
      type: Number,
      value: 500
    },
    //  设置当前下拉刷新状态
    loading: {
      type: Boolean,
      value: false
    },
    // 是否使用默认下拉刷新插槽
    refresherCustom: {
      type: Boolean,
      value: true
    },
    // 自定义默认下拉刷新块的样式
    refresherStyle: {
      type: String,
      value: ''
    },
    // 根节点添加class
    customClass: {
      type: String,
      value: ''
    },
    // 根节点style
    customStyle: {
      type: String,
      value: ''
    },
    // 设置竖向滚动条位置
    scrollTop: {
      type: Number,
      value: 0
    },
    // 值应为某子元素id（id不能以数字开头）。
    scrollIntoView: {
      type: String,
      value: ''
    },
    // 在设置滚动条位置时使用动画过渡
    scrollWithAnimation: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 滑动方向
    direction: 'y',
    // 设置自定义下拉刷新默认样式
    refresher_default_style: 'none',
    // 设置自定义下拉刷新区域背景颜色
    refresher_background: '#FFF',
    // 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动
    scroll_anchoring: true,
    // 当前滑动的值
    deltaY: 0,
    // 下拉刷新提示文本 根据不同阈值显示
    refresher_notic: '',
    // 滑动状态码
    // 0 复位
    // 1 未达到阈值
    // 2 达到阈值
    // 3 http请求中
    // -- 4 http请求成功  待定
    // -- 5 http请求失败  待定
    // -- 6 http成功或者失败状态到 复位的延迟时间  待定
    refresh_state: 0
    //  设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 自定义下拉刷新控件被下拉
    pullingHandle(event) {
      const deltaY = event.detail.dy
      let refresh_state
      let refresher_notic
      if (deltaY < this.data.pullDistance) {
        refresh_state = 1
        refresher_notic = this.data.pullingText
      } else {
        refresh_state = 2
        refresher_notic = this.data.loosingText
      }
      this.setData({
        refresh_state,
        deltaY,
        refresher_notic
      })
      this.triggerEvent('pulling', {
        event,
        state: this.data.refresh_state
      })
    },
    // 自定义下拉刷新被触发
    refreshHandle(event) {
      this.setData({
        refresher_notic: this.data.loadingText,
        refresh_state: 3
        // loading: true,
      })
      this.triggerEvent('refresh', {
        event,
        state: this.data.refresh_state
      })
    },
    // 自定义下拉刷新被复位
    restoreHandle(event, trigger = true) {
      this.setData({
        refresh_state: 0,
        deltaY: 0,
        refresher_notic: this.data.pullingText
        // loading: false,
      })
      if (trigger) {
        this.triggerEvent('restore', {
          event,
          state: this.data.refresh_state
        })
      }
    },
    // 自定义下拉刷新被中止
    abortHandle(event) {
      this.restoreHandle(null, false)
      this.triggerEvent('abort', {
        event,
        state: this.data.refresh_state
      })
    },
    // 滚动到顶部/左边时触发
    toTopHandle(event) {
      this.triggerEvent('toTop', event)
    },
    // 滚动到底部/右边时触发
    toBottomHandle(event) {
      this.triggerEvent('toBottom', event)
    },
    // 滚动事件
    bindscroll(event) {
      this.scrollTop = event.detail.scrollTop
      this.trigggerEvent('scroll', event)
    }
  }
})
